<template>
  <div class="container talent_detail">
    <div class="section">
      <ul class="info">
        <li class="list-item">
          <div class="tip">
            主图：
          </div>
          <div class="detail">
            <ul class="pic-list">
              <li
                v-for="(item, index) in talent_detail.bannerList"
                :key="index"
                class="pic-item"
              >
                <img
                  :src="common.img_url+item"
                  alt=""
                  class="img"
                >
              </li>
            </ul>
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            分类：
          </div>
          <div class="detail">

            <el-tag >{{talent_detail.cateName}}</el-tag>
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            标题：
          </div>
          <div class="detail">
            {{talent_detail.title}}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            正文：
          </div>
          <div class="detail talent_detail">
            <ul
              class="detail-list"
              v-html="talent_detail.des"
            />
          </div>
        </li>
        <li class="list-item" v-if="disableType === 1 || talent_detail.userTypeStr === '系统'">
          <div class="tip">
            审核结果：
          </div>
          <div class="detail">
            <el-radio-group
              v-model="auditStatus"
              :disabled="disableType === 0"
              @change="this.radioChange"
            >
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="2">不通过</el-radio>

            </el-radio-group>
          </div>
        </li >
        <li class="list-item" v-if="disableType === 1 || talent_detail.userTypeStr === '系统'" :hidden="remHidden">
          <div class="tip">
            备注：
          </div>
          <div class="detail">
            <el-input
              v-model="auditRemark"
              :disabled="disableType === 0"
              placeholder="请输入内容"
              style="width: 370px"
            />
          </div>
        </li >
      </ul>
    </div>
    <div class="sub-btn" v-if="disableType === 1 || talent_detail.userTypeStr === '系统'">
      <el-button
        type="primary"
        :disabled="auditStatus === 0"
        @click="save_talent()"
      >保存</el-button>
    </div>
  </div>
</template>
<script>
import { audit, getTalent } from '../../api/article'
import { getCateDownList } from '../../api/category'
export default {
  data() {
    return {
        talent_id: 0,
        disableType:'',
        talent_detail: {},
        talent_data: {},
        auditStatus:0,//审核状态
        auditRemark:'',//审核内容
        remHidden:true,//备注输入隐藏
        cateData:[],//
        cate:'',//分类
      }
  },
  created() {
      if (this.$route.query.id) {
        this.talent_id = this.$route.query.id
        this.disableType =  this.$route.query.type
        this.get_detail()
      }
    },
  methods: {
      //
      radioChange(e){
        if(e === 1){
          this.remHidden = true
        }
        if(e === 2){
          this.remHidden = false
        }
      },

      //获取详情
      get_detail() {
        //达人详情
        getTalent({
          id: this.talent_id
        }).then((result) => {
          const res = result.data
          if (res.code === 0) {
            this.talent_detail = res.data
            this.cate = res.data.cateId
            if( this.disableType === 1){
              this.auditStatus = res.data.auditStatus
              this.auditRemark = res.data.auditRemark
            }
          } else {
            this.$message.error(res.msg)
          }
        }).catch((err) => {
          this.$message.error('服务器网络错误，请稍后重试')
        })
      },
      //审核
      save_talent(){
        if (this.checkInfo()) {
          audit({
            id: this.talent_id,
            auditStatus: this.auditStatus,
            auditRemark: this.auditRemark,
          }).then(res => {
            if (res.data.code === 0) {
              this.$message({
                message: '审核成功',
                type: 'success'
              })
              this.$router.go(-1)
            } else {
              this.$message.error(res.data.msg)
            }
          }).catch(err => {
            this.$message.error(err)
          })

        } else {
          // 弹出错误框
          this.$message({
            showClose: true,
            message: '请填写必要参数',
            type: 'error'
          })
        }
      },
      //检查参数
      checkInfo(){
        return !(this.auditStatus === 2 &&(this.auditRemark === '' || this.auditRemark === null) );
      }
    },
}
</script>

<style lang="less" scoped>
  .container {
    padding: 20px;
    .section {
      .info {
        margin-left: 40px;
        .list-item {
          margin-bottom: 20px;
          .tip {
            color: #409eff;
            font-size: 16px;
            display: inline-block;
            vertical-align: top;
            width: 130px;
            text-align: right;
          }
          .detail {
            color: #666;
            font-size: 16px;
            display: inline-block;
            vertical-align: middle;
            //   主图 和 项目展示图 列表
            .pic-list {
              .pic-item {
                display: inline-block;
                vertical-align:baseline;
                background-color: #ccc;
                width: 100px;
                height: 100px;
                margin-right: 15px;
                overflow: hidden;
                .img {
                  width: 100% !important;
                  height: auto;
                  display: block;
                }
              }
            }
            //   项目详情图列表
            .detail-list {
              width: 375px;
              border: 1px solid #ccc;
              img {
                width: 100% !important;
                height: auto;
                display: block;
              }
            }
            &.talent_detail {
              vertical-align: top;
            }
          }
        }
      }
    }
  }
  .sub-btn {
    .el-button {
      margin: 20px auto;
      display: block;
    }
  }
</style>

<style lang="scss">
  .talent_detail {
    //   达人详情图列表
    .detail-list {
      width: 375px;
      min-height: 750px;
      border: 1px solid #ccc;
      img {
        width: 100% !important;
        height: auto;
        display: block;
      }
    }
  }
</style>

